<template>
  <view class="cu-form-group">
    <picker
      mode="multiSelector"
      @change="MultiChange"
      @columnchange="MultiColumnChange"
      :value="multiIndex"
      :range="multiArray.slice(0,column_)"
      range-key="region_name"
    >
      <view class="uni-input">
				
				<text class="margin-right-sm" v-if="word">
					{{word}}
				</text>
				<text v-else-if="!selected" class="grey">请选择</text>
				<view v-else>
					<text v-for="(item, index) in column_" :key="index" class="margin-right-sm">
					  <text>{{multiArrayClone[index][multiIndexClone[index]].region_name}}</text>
					  <text v-if="index!==column_-1">-</text>
					</text>
				</view>
      </view>
    </picker>
  </view>

  <!-- </view> -->
</template>
<script>
export default {
  name: "c-region",
	options: { styleIsolation: 'shared' },
  props: {
    title_: {
      type: String,
      default: "省市区",
    },
    multiIndex_: {
      //eg: multiIndex_="['14','14002','14002002']"
      type: Array,
      default: function () {
        return [];
      },
    },
    //自定义第一个选项的名称
    custom_: {
      type: String,
      default: "",
    },
    column_: {
      type: Number,
      default: 3,
    },
  },
  components: {},
  data() {
    return {
		word: '',
			selected: false,
      multiArray: [],
      multiArrayClone: [],
      multiIndex: [0, 0, 0],
      multiIndexClone: [0, 0, 0],
      region: uni.getStorageSync("region") || {},
    };
  },

  onShow() {},
  mounted() {
  },
  onLoad() {},
  computed: {},
  watch: {
    custom_: {
      handler: function (nVal, oVal) {
        // if (nVal) {
        //   this.region = this.setDefaultFirstOption();
        // }
      },
      immediate: true,
    },
    multiIndex_: {
      handler: function (nVal, oVal) {
        if (!nVal.length) {
          const column1 = this.objToArr(this.region);
          const column2 = this.objToArr(column1[0].child);
          const column3 = this.objToArr(column2[0].child);
          this.multiArray = [column1, column2, column3];
          this.multiArrayClone = JSON.parse(JSON.stringify(this.multiArray));
          return;
        }
				this.selected = true;
        const provinceId = nVal[0];
        const cityId = nVal[1];
        const areaId = nVal[2];

        const tempMultiArray = [];
        const column0 = this.objToArr(this.region);

        const index0 = column0.findIndex(
          (item) => item.region_id === provinceId
        );

        const column1 = this.objToArr(column0[index0].child);

        const index1 = column1.findIndex((item) => item.region_id === cityId);

        tempMultiArray.push(column0);
        this.multiIndex[0] = index0;

        tempMultiArray.push(column1);
        this.multiIndex[1] = index1;

        const column2 = this.objToArr(tempMultiArray[1][index1].child);
        const index2 = column2.findIndex((item) => item.region_id === areaId);

        tempMultiArray.push(column2);
        this.multiIndex[2] = index2;
        this.multiArray = tempMultiArray;
        this.multiArrayClone = JSON.parse(JSON.stringify(this.multiArray));
        this.multiIndexClone = JSON.parse(JSON.stringify(this.multiIndex));
      },
      immediate: true,
    },
  },
  methods: {
	  setWord: function (v) {
	  	this.word = v;
	  },
    objToArr(obj) {
      const arr = Object.values(obj);
      let defaultIndex;
      let list = arr.map((item, index) => {
        if (item.region_name === this.custom_) {
          defaultIndex = index;
        }
        return {
          region_id: item.region_id,
          region_name: item.region_name,
          child: item.child,
        };
      });
      if (defaultIndex !== undefined) {
        const temp = list[defaultIndex];
        list.splice(defaultIndex, 1);
        list.unshift(temp);
      }
      return list;
    },
    MultiChange(e) {
      this.multiIndexClone = e.detail.value;
      this.multiArrayClone = JSON.parse(JSON.stringify(this.multiArray));
      const arr = [];
			const nameArr = [];
      for (let index = 0; index < this.column_; index++) {
        arr.push(
          this.multiArrayClone[index][this.multiIndexClone[index]].region_id
        );
				nameArr.push(
				  this.multiArrayClone[index][this.multiIndexClone[index]].region_name
				);
      }
	  this.word = '';
      this.$emit("selecteRegion_", {
				code: arr,
				name: nameArr
			});
      //   return arr;
    },
    MultiColumnChange(e) {
      let data = {
        multiArray: this.multiArray,
        multiIndex: this.multiIndex,
      };
      data.multiIndex[e.detail.column] = e.detail.value;
      const column = e.detail.column; // 移动某一列

      if (column === 0) {
        //移动第一列
        const row = data.multiIndex[0]; //移动第一列的某一行
        data.multiArray[1] = this.objToArr(data.multiArray[0][row].child);
        data.multiArray[2] = this.objToArr(data.multiArray[1][0].child);
        data.multiIndex[1] = 0;
        data.multiIndex[2] = 0;
      } else if (column === 1) {
        //移动第二列
        const row = data.multiIndex[1]; //移动第一列的某一行
        data.multiArray[2] = this.objToArr(data.multiArray[1][row].child);
        data.multiIndex[2] = 0;
      }

      this.multiArray = [...data.multiArray];
      this.multiIndex = [...data.multiIndex];
    },
    setDefaultFirstOption() {
      let region = uni.getStorageSync("region");
      region["00"] = {
        region_id: "00",
        region_name: this.custom_,
        child: {
          "00": {
            region_id: "00",
            region_name: this.custom_,
            child: {
              "00": {
                region_id: "00",
                region_name: this.custom_,
              },
            },
          },
        },
      };

      for (const provinceK in region) {
        if (region.hasOwnProperty(provinceK)) {
          const province = region[provinceK];
          if (province.child) {
            province.child["00"] = {
              region_id: "00",
              region_name: this.custom_,
              child: {
                "00": {
                  region_id: "00",
                  region_name: this.custom_,
                },
              },
            };
          }

          for (const cityK in province.child) {
            if (province.child.hasOwnProperty(cityK)) {
              const city = province.child[cityK];
              if (city.child) {
                city.child["00"] = {
                  region_id: "00",
                  region_name: this.custom_,
                };
              }
            }
          }
        }
      }
      return region;
    },
  },
};
</script>
<style lang="scss" scoped>
.cu-form-group {
  width: 100%;
	font-size: 28rpx;
	/deep/ .uni-input {
		text-align: right;
	}
}
.title {
  text-align: center;
}
.grey {
	color: #c0c4cc;
	text-align: right;
}
.margin-right-sm {
	font-size: 28rpx;
	text-align: right;
}
</style>